<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../../../css/mui.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <!-- <link rel="stylesheet" href="css/body.css"> -->
    <link rel="stylesheet" href="../css/new.css">
    <link rel="stylesheet" type="text/css" href="../../../css/mui.picker.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/mui.poppicker.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/preview.css" />
    <title>注册</title>
    <style>
      .form-item{border-bottom:1px solid rgba(228, 228, 228, 1);margin:10px 0;
			display: flex;flex-wrap:wrap;}.p-form{padding:2vh 6.5%;}
			.form-item span{font-size: 14px;}
			.form-item span:nth-child(1){width:62px;text-align-last: justify;color:#666;}
			.form-item span:nth-child(2){width:calc(100% - 62px);}
			.form-item input{background:none;border:none;color:rgb(153, 153, 153);
			margin:0;border-radius: 0;}
			.form-item input,.form-item span,.form-item{height:40px;line-height: 40px;}
			.form-item input{font-size: 14px; font-weight: 400; color:#555;height:38px;line-height: 38px;}
			.mui-radio{display: flex;}.mui-radio input[type=radio]{transform: scale(.7);position: relative;right:0;margin-right: 15px;}
			.mui-icon-arrowright{position: relative;}
			.mui-icon-arrowright:before{ position: absolute;right:0;color: #bbb;font-size: 22px;}
			.p-sendcode{position: relative;}.p-qrts{width: 70%;padding:5px 0 0 30%;display: flex; visibility: hidden;
			justify-content: flex-start;}.p-qrts font{width:auto;padding:0 24px;height:20px;line-height: 20px;
			background:rgba(242, 242, 242, 1);text-align: center;}
			.p-qrts font:nth-child(2){}
			.mui-btn-primary{position: absolute;right:0;top:0;}
			.p-qrts font{color: #aaa;font-size: 12px;}.p-qrts font.on{background: orangered;color: #fff;}
			.p-qrts font:nth-child(2).on{background: #F19149;}.yzm-btn{
					transition: none;
					padding: 2px 0;border:1px solid #339AF2;
					height: 24px;width:auto;color: #339AF2;
					border-radius: 15px;text-align: center;
					top: 8px;line-height: 19px;right:0;
					font-size: 12px; position: absolute;
			}
			.p-qrts font:nth-child(1){border-radius: 20px 0 0 20px;}
			.p-qrts font:nth-child(2){}
			.p-qrts font:nth-child(3){border-radius: 0 20px 20px 0;}
			.p-qrts font:nth-child(1).on{}
			.p-qrts font:nth-child(2).on{}
			.p-qrts font:nth-child(3).on{background: #0CBD5F;}
      .p-btn {
          width: 100%;
          text-align: center;
          background: #275EB1;
          color: #fff;
          font-size: 18px;
          line-height: 40px;
          height: 40px;
          margin: 20px 0;
          border-radius: 2px;
      }
      .uploadBox .upload-comp div::before{
        background: none;
      }
		</style>
  </head>
  <body>
    <header class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title">关联项目详情</h1>
    </header>
    <div class="mui-content" id="page" v-cloak>
      <div class="p-form">
        <div class="form-item">
          <span>姓名</span><span><input v-model="form.compellation" type="text" placeholder="" disabled="disabled"></span>
        </div>
        <div class="form-item">
          <span>身份证号</span><span><input v-model="form.idCard" type="text" placeholder="" disabled="disabled"></span>
        </div>
        <div class="form-item">
          <span>手机号</span><span><input v-model="form.phone" type="text" placeholder="" disabled="disabled"></span>
        </div>
        <div class="form-item" v-if="form.hasUnit=='0'">
          <span>所在区域</span><span>
            <input v-model="form.areaName" type="text" @click.stop="getArea" readonly placeholder="" />
        </div>
        <div class="form-item" v-if="form.hasUnit=='0'">
          <span>所属场站</span><span>
            <input v-model="form.stationName" type="text" @click.stop="getStation" readonly placeholder="" />
        </div>
        <div class="form-item" v-if="form.hasUnit=='1'">
          <!-- <div class="form-item"> -->
          <span>所属单位</span><span>
            <input v-model="form.enterpriseName" type="text" readonly placeholder=""></span>
        </div>
        <div class="form-item">
          <span>作业项目</span><span>
            <input v-model="form.currentProjectName" type="text" readonly placeholder=""></span>
        </div>
        <div class="uploadBox">
          <div class="p-mw">身份证照片<font color="red">*</font>
          </div>
          <div class="p-mw tishi">请上传清晰的本人身份证正反面照片</div>
          <div class="p-mw tishi">示例：</div>
          <div class="p-mw">
            <img width="20%" src="./../img/sfz_a.png">
            <img width="20%" src="./../img/sfz_b.png">
          </div>
          <div class="p-mw upload-comp">
            <div class="p-posr hasimg" v-for="(item,index) in form.idCardP">
              <img class="upload_loading" src="../sign/loading.gif" style="width: 50%;height:50%;margin:25%;opacity:0;">
              <img style="visibility: hidden;" @load="uploadessload($event)" :src="filePath+item.id+'?token='+token" data-preview-src="" data-preview-group="1">
              <!-- <a href="javascript:;" @click="deletePhone($event,index,'idCardP')"> </a> -->
            </div>

            <!-- <div class="p-posr comp-1" data-front="1" @click.stop="choosePhoto($event,'idCardP')" v-if="checkFiles(form.idCardP,1)">
              <span data-front="1">身份证正面</span>
            </div>
            <div class="p-posr comp-1" data-front="2" @click.stop="choosePhoto($event,'idCardP')" v-if="checkFiles(form.idCardP,2)">{{checkFiles(form.idCardP,2)}}
              <span data-front="2">身份证背面</span>
            </div> -->
          </div>
        </div><!-- end uploadBox -->
        <div class="uploadBox">
          <div class="p-mw">体检报告<font color="red">*</font>
          </div>
          <div class="p-mw tishi">请上传近3个月清晰的本人体检报告</div>
          <div class="p-mw upload-comp">
            <div class="p-posr hasimg" v-for="(item,index) in form.examination">
              <img class="upload_loading" src="../sign/loading.gif" style="width: 50%;height:50%;margin:25%;opacity:0;">
              <img style="visibility: hidden;" @load="uploadessload($event)" :src="filePath+item.id+'?token='+token" data-preview-src="" data-preview-group="1">
              <!-- <a href="javascript:;" @click="deletePhone($event,index,'examination')"> </a> -->
            </div>
            <!-- <div class="p-posr"></div> -->
          </div>
        </div><!-- end uploadBox -->
        <div class="uploadBox">
          <div class="p-mw">工作票负责人授权书<font color="red">*</font>
          </div>
          <div class="p-mw tishi">如承担工作票负责人，请上传授权书</div>
          <!-- <div class="upload-radio">
        		<span>是</span><input v-model="hasAuthorization" name="radio1" value="1" type="radio">
        		<span>否</span><input v-model="hasAuthorization" name="radio1" value="0" type="radio">
        	</div> -->
          <div class="form-item">
            <span style="width: 0px;"></span><span class="mui-input-row mui-radio" style="padding-left:0%">
              <font color="#777">是</font><input v-model="hasAuthorization" type="radio" name="radio1" value="1" disabled="disabled">
              <font color="#777">否</font> <input v-model="hasAuthorization" name="radio1" type="radio" value="2" disabled="disabled">
            </span>
          </div>
          <div class="p-mw upload-comp" v-if="hasAuthorization == '1'">
            <div class="p-posr hasimg" v-for="(item,index) in form.authorization">
              <img class="upload_loading" src="../sign/loading.gif" style="width: 50%;height:50%;margin:25%;opacity:0;">
              <img style="visibility: hidden;" @load="uploadessload($event)" :src="filePath+item.id+'?token='+token" data-preview-src="" data-preview-group="1">
              <!-- <a href="javascript:;" @click="deletePhone($event,index,'authorization')"> </a> -->
            </div>
            
            <!-- <div class="p-posr"></div> -->
          </div>
        </div><!-- end uploadBox -->
        <div class="uploadBox">
          <div class="p-mw">作业工种<font color="red">*</font>
          </div>
          <div class="p-mw upload-job">
            <span v-for="item in jobsClass" :class="{selected: isTags(item.id)}" :data-value="item.value">{{item.label}}</span>
            <div style="clear: both;"></div>
          </div>
        </div><!-- end uploadBox -->
		<div class="uploadBox">
			<div class="p-mw">检验报告：<font color="red"></font></div>
			<div class="p-mw tishi">工器具、劳动防护用品合格证、检验合格报告等</div>
			<div class="p-mw upload-comp">
				<div class="p-posr hasimg" v-for="(item,index) in form.special">
					<img class="upload_loading" src="../sign/loading.gif" style="width: 50%;height:50%;margin:25%;opacity:0;">
					<img style="visibility: hidden;" @load="uploadessload($event)" :src="filePath+item.id+'?token='+token" data-preview-src="" data-preview-group="1">
				</div>
				<div v-if="form.special.length===0">
				  <img src="../img/no.png" style="width: 100%;">
				</div>
			</div>
		</div>
        <div class="uploadBox">
          <div class="p-mw">个人特种作业证件：<font color="red"></font>
          </div>
          <div class="p-mw tishi"></div>
          <div class="p-mw upload-comp">
            <div class="p-posr hasimg" v-for="(item,index) in form.certificate">
              <img class="upload_loading" src="../sign/loading.gif" style="width: 50%;height:50%;margin:25%;opacity:0;">
              <img style="visibility: hidden;" @load="uploadessload($event)" :src="filePath+item.id+'?token='+token" data-preview-src="" data-preview-group="1">
              <!-- <a href="javascript:;" @click="deletePhone($event,index,'certificate')"> </a> -->
            </div>
            <div v-if="form.certificate.length===0">
              <img src="../img/no.png" style="width: 100%;">
            </div>
          </div>
        </div>
        <div class="uploadBox" style="border: 0;">
          <div class="p-mw">本人驾驶证：<font color="red"></font>
          </div>
          <div class="p-mw tishi">请上传符合本人作业车辆的驾照照片 ，5年以上驾龄</div>
          <div class="p-mw upload-comp">
            <div class="p-posr hasimg" v-for="(item,index) in form.drivinglicense">
              <img class="upload_loading" src="../sign/loading.gif" style="width: 50%;height:50%;margin:25%;opacity:0;">
              <img style="visibility: hidden;" @load="uploadessload($event)" :src="filePath+item.id+'?token='+token" data-preview-src="" data-preview-group="1">
              <!-- <a href="javascript:;" @click="deletePhone($event,index,'drivinglicense')"> </a> -->
            </div>
            <div v-if="form.drivinglicense.length===0">
              <img src="../img/no.png" style="width: 100%;">
            </div>
          </div>
        </div><!-- end uploadBox -->
        <!-- <div class="p-btn" @click="next">关联</div> -->
      </div>

    </div>
  </body>
  <script src="../../../js/mui.min.js"></script>
  <script src="../../../js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
  <script src="../../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
  <script src="../../../js/jquery-3.2.1.min.js"></script>
  <script src="../../../js/mkeyplus.base.js"></script>
  <script src="../../../js/common.js"></script>
  <script src="../js/mkeyplus.base.js"></script>
  <script type="text/javascript" src="../../../js/vue.js"></script>
  <script src="../../../js/uuid.js"></script>
  <script src="../formal/js/api.js"></script>
  <script src="../formal/js/up.js?5"></script>
  <script src="../../../js/mui.zoom.js"></script>
  <script src="../../../js/mui.previewimage.js"></script>
  <script>
    mui.init();
    var htapi = new HTGlobal();
    //避免重复绑定
    var projectAdd = null;
    var selectEnterprise = function(data) {
      return htapi.eventSelectEnterprise.call(htapi, data);
    }
    window.removeEventListener('eventSelectEnterprise', selectEnterprise);
    window.addEventListener('eventSelectEnterprise', selectEnterprise);
    var cv = null,
      isUnit = null;
    var id="";
     mui.previewImage();//图片预览
    // mui('#topPopover').popover('show')
    mui.plusReady(function() {
      cv = plus.webview.currentWebview();
      id = cv.pageId ? cv.pageId : '';
      projectAdd.getData(id)
      projectAdd.getJobs();
    })
    projectAdd = new Vue({
      el: '#page',
      data: {
        user: JSON.parse(localStorage.getItem('outUser')), //当前用户信息
        isUnit: '', //是否由单位1是0否
        hasAuthorization: 1,
        postData: {},
        form: {
          appUserId:'',//当前用户id
          compellation:'',//姓名
          idCard:'',//身份证号
          phone:'',//手机号
          hasUnit: '',//是否由单位1是0否
          areaId: '',//区域
          areaName: '',
          stationId: '',//场站
          stationName: '',
          enterpriseId: '', //单位ID
          enterpriseName: '', //单位名称
          currentProjectId: '', //项目ID
          currentProjectName: '', //项目名称
          enterpriseProjectId:'',//关联项目ID
          sex: 1,
          code: '',
          idCardP: [], //身份证图片列表
          examination: [], //体检报告
          authorization: [], //授权书
          special: [], //特种证件
          certificate: [], //个人特种作业证
          tbJobClasses: [], //工作类型
          drivinglicense: [], //驾驶证
        },
        jobsClass: [], //作业类别
        hasAppUser: true,
		filePath:'',
		token:''
      },
      onLoad() {},
	  created(){
		  this.filePath = htapi.filePath;
		  this.token = localStorage.getItem('token');
	  },
      methods: {
        getData(id){//获取详情
          var that = this;
          plus.nativeUI.showWaiting('加载中');
          mui.baseWApp.httpRequst("/outsider/app/backUpAppUser/getDetail/" + id, {}, function(data) {
            if (data.code == '0'){
              console.log('项目详情' + JSON.stringify(data));
              var data=data.data;
              that.form.appUserId=data.appUserId;//当前用户id
              that.form.compellation=data.compellation;//姓名
              that.form.idCard=data.idCard;//身份证号
              that.form.phone=data.phone;//手机号
              that.form.hasUnit= data.hasUnit;
              that.form.areaId= data.areaId;
              that.form.areaName= data.areaName;
              that.form.stationId= data.stationId;
              that.form.stationName= data.stationName;
              that.form.enterpriseId= data.enterpriseId; //单位ID
              that.form.enterpriseName= data.enterpriseName; //单位名称
              that.form.currentProjectId= data.currentProjectId; //项目ID
              that.form.currentProjectName= data.currentProjectName; //项目名称
              that.form.enterpriseProjectId=data.enterpriseProjectId;//关联项目ID
              that.form.idCardP=data.tbAppUserFileDTOS.filter(function(value){	return value.type == 3});
              that.form.examination=data.tbAppUserFileDTOS.filter(function(value){	return value.type == 4});
              that.form.authorization=data.tbAppUserFileDTOS.filter(function(value){	return value.type == 1});
              that.form.certificate=data.tbAppUserFileDTOS.filter(function(value){	return value.type == 2});
              that.form.drivinglicense=data.tbAppUserFileDTOS.filter(function(value){	return value.type == 6});
              that.form.special=data.tbAppUserFileDTOS.filter(function(value){	return value.type == 5});
              if(that.form.authorization.length==1){
                that.hasAuthorization=1
              }else{
                that.hasAuthorization=2
              }
              //alert(JSON.stringify(that.form.idCardP));
              data.tbJobClasses.forEach(function(item){
                that.form.tbJobClasses.push(item.id)
              })
              that.$forceUpdate()
            }else{
				mui.toast(data.msg)
			}
            plus.nativeUI.closeWaiting();
          }, function() {
            plus.nativeUI.closeWaiting();
            console.log("获取数据失败");
          })
        },
        uploadessload(e) {
          var pe = $(e.target).parents('.hasimg');
          pe.find('.upload_loading').remove();
          pe.find('img').css('visibility', 'inherit');
        },
        checkFiles(list, type) {
          return !list.some(function(item) {
            return item.type == type
          });
        },
        getJobs() {
          console.log(mui.baseWApp.serverUrl, 1111)
          //获取工种
          var _this = this;
          htapi.getDictList({
            dictName: 'Job_type'
          }, function(data) {
            if (data.code == '0') {
              // console.log('工种' + JSON.stringify(data))
              if (data.data) {
                _this.jobsClass = data.data;
                //console.log(_this.jobsClass);
              }
            }
          });

        },
        // 标签选择样式控制
        isTags(id) {
          if (this.form.tbJobClasses.includes(id)) {
            return true;
          } else {
            return false;
          }
        },
      }
    })
    window.addEventListener('projectUnit', function(event) {
      console.log(JSON.stringify(event.detail))
      projectAdd.form.enterpriseName = event.detail.enterpriseName
      projectAdd.form.enterpriseId = event.detail.enterpriseId
    });
  </script>
</html>
